<template>
  <div>
    <table class="table table-bordered table-vertical-middle text-center" v-loading="loading">
      <thead>
        <tr>
          <th>序号</th>
          <th class="text-left">报表名</th>
          <th>报表说明</th>
          <th>
            <span>季度</span>
            <el-date-picker
              class="text-year-picker"
              v-model="yearDate"
              type="year"
              :clearable="false"
              prefix-icon="el-icon-caret-bottom"
              format="(yyyy年)"
              placeholder="选择年"
              @change="setQuarterDisabled"
            ></el-date-picker>
          </th>
          <th v-if="isReporter">新增</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="report in tableData" :key="report.index">
          <td>{{ report.index }}</td>
          <td class="text-left">{{ report.name }}</td>
          <td class="text-left">{{ report.desc }}</td>
          <td>
            <ul class="list-inline">
              <li class="list-inline-item" v-for="(di, j) in report.disabled" :key="`q-${j}`">
                <el-button
                  type="text"
                  :class="di ? 'text-muted' : ''"
                  :disabled="di"
                  @click="handleView(report.index, yearDate.getFullYear(), j + 1, true)"
                >
                  {{ enumQuarter[j + 1] }}季度
                </el-button>
              </li>
            </ul>
          </td>
          <td v-if="isReporter">
            <el-button type="text" icon="el-icon-plus" @click="handleAdd(report.index)"></el-button>
            <!-- <el-tooltip class="item"
                        effect="dark"
                        placement="bottom"
                        :disabled="!addDisabled">
              <el-button type="text"
                         icon="el-icon-plus"
                         @click="handleAdd(report.index)"></el-button>
              <div slot="content">
                <span>1、只能由报表管理员新增</span><br>
                <span>2、只能在下季度第一个月10号前新增</span>
              </div>
            </el-tooltip> -->
          </td>
        </tr>
      </tbody>
    </table>

    <g7-dialog
      :visible.sync="g7Visible"
      :view-mode="g7ViewMode"
      :query-year="g7Year"
      :query-quarter="g7Quarter"
    ></g7-dialog>

    <g8-dialog
      :visible.sync="g8Visible"
      :view-mode="g8ViewMode"
      :query-year="g8Year"
      :query-quarter="g8Quarter"
    ></g8-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { enumQuarter, isQuarterDisabled } from '@/credit/views/city/reportCity/manage/quarter/minix'

import G7Dialog from '@/credit/views/city/reportCity/manage/quarter/g7Dialog'
import G8Dialog from '@/credit/views/city/reportCity/manage/quarter/g8Dialog'

const date = new Date()
const currentYear = date.getFullYear()
const currentQuarter = Math.ceil((date.getMonth() + 1) / 3)

export default {
  components: {
    G7Dialog,
    G8Dialog,
  },
  props: {},
  data() {
    return {
      loading: false,
      enumQuarter,

      tableData: [
        {
          index: 1,
          name: '融资担保公司季度监管报表',
          desc: '季末下一月15日前报送',
          disabled: [false, false, false, false],
        },
        {
          index: 2,
          name: '政府性融资担保机构季度监管报表',
          desc: '季末下一月15日前报送',
          disabled: [false, false, false, false],
        },
      ],

      yearDate: date,
      queryDate: date,

      g7Visible: false,
      g7ViewMode: true,
      g7Year: currentYear,
      g7Quarter: currentQuarter,

      g8Visible: false,
      g8ViewMode: true,
      g8Year: currentYear,
      g8Quarter: currentQuarter,
    }
  },
  computed: {
    ...mapGetters(['user']),
    addDisabled() {
      const date = new Date()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return this.user.isReporter !== 1 || ![1, 4, 7, 10].includes(month) || day > 10
    },
    isReporter() {
      return +this.user.isReporter === 1
    },
  },
  watch: {},
  created() {
    if (this.yearDate.getMonth() < 3) {
      this.yearDate = new Date(`${this.yearDate.getFullYear() - 1}`)
    }
    this.setQuarterDisabled()
  },
  mounted() {},
  methods: {
    setQuarterDisabled() {
      const year = this.yearDate.getFullYear()
      this.tableData.forEach(it => {
        const disabled = []
        for (let i = 0; i < 4; i++) {
          disabled[i] = isQuarterDisabled(year, i + 1)
        }
        it.disabled = disabled
      })
      this.getCityReport()
    },

    handleView(reportIndex, year, quarterIndex, viewMode) {
      switch (reportIndex) {
        case 1:
          this.g7Year = year
          this.g7Quarter = quarterIndex
          this.g7ViewMode = viewMode
          this.g7Visible = true
          break
        case 2:
          this.g8Year = year
          this.g8Quarter = quarterIndex
          this.g8ViewMode = viewMode
          this.g8Visible = true
          break
        default:
          break
      }
    },

    handleAdd(reportIndex) {
      // if (this.addDisabled) {
      //   return // this.$message.error('不能新增报表')
      // }
      const date = new Date()
      let year = date.getFullYear()
      const month = date.getMonth() + 1
      let queary = Math.ceil(month / 3)
      if (month < 4) {
        year--
        queary = 4
      }
      this.handleView(reportIndex, year, queary, false)
    },

    getCityReport(year) {
      this.loading = true
      return this.$api
        .getData(this.$serviceName, 'report_quarter', {
          'year_number.lte': year,
          'year_number.gte': year - 1,
          fields: ['year_number', 'quarter_number'],
        })
        .then(res => {
          const data = res.data || []
          const { disabled } = this.tableData[0]

          // 第一季度，看上一年第四季度是否已创建
          if (!disabled[0]) {
            const preYearLastQuarter = data.find(
              it => +it.year_number === year - 1 && +it.quarter_number === 4
            )
            if (!preYearLastQuarter) {
              disabled[0] = true
            }
          }

          // 其余看当前年上一季度是否创建
          for (let i = 2; i < 5; i++) {
            if (!disabled[0]) {
              const quarter = data.find(
                it => +it.year_number === year && +it.quarter_number === i - 1
              )
              if (!quarter) {
                disabled[0] = true
              }
            }
          }

          this.tableData[0].disabled = disabled
        })
        .finally(() => {
          this.loading = false
        })
    },

    getLastCityReport() {
      return this.$api
        .getData(
          this.$serviceName,
          'report_quarter',
          {
            index: 1,
            size: 1,
            fields: ['year_number', 'quarter_number'],
          },
          {
            year_number: 'desc',
            quarter_number: 'desc',
          }
        )
        .then(res => {
          const list = (res && res.data && res.data.data) || []
          const data = list && list.length && list[0]
          return data
            ? {
                year: +data.year_number,
                quarter: +data.quarter_number,
              }
            : null
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.text-year-picker {
  width: 82px;
  /deep/ .el-input__inner {
    border: none;
    padding: 0 2px;
    &:focus {
      box-shadow: none;
    }
  }
  /deep/ .el-input__prefix {
    left: auto;
    right: 5px;
  }
}
</style>
